<template lang="html">
    <div class="record-manage-details">
        <nav-header>
        <template slot="menuBefore">
            <li>
            <router-link to="/affairs/teachers/record-manage">档案管理</router-link>
            </li>
            <li class="gap">&gt;</li>
        </template>
            <li v-text="flag ? '详情' : '编辑'"></li>
        </nav-header>
        <div class="details-container" v-loading="pageLoad.status" :element-loading-text="pageLoad.txt">
        <div class="details-title">
            档案信息<span class="tips">(如无则填无，多个信息时，用；隔开)</span>
        </div>
        <el-form ref="form" :model="formDefined" label-width="100px">
            <el-form-item label="账号" prop="account" :required="true" :rules="[{ required: true, message: '请输入有效值', trigger: 'blur' }]">
            <el-input v-model="formDefined.account" placeholder="根据输入账号自动获取" readonly></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="name" :rules="[{ required: true, message: '请输入有效值', trigger: 'blur' }]">
            <el-input v-model="formDefined.name" placeholder="根据输入账号自动获取" readonly></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex" :rules="[{ required: true, message: '请输入有效值', trigger: 'blur' }]">
            <el-input v-model="formDefined.sex" placeholder="根据输入账号自动获取" readonly></el-input>
            </el-form-item>
            <el-form-item label="民族" prop="nationality">
            <el-input v-model="formDefined.nationality" placeholder="根据输入账号自动获取" :readonly="flag"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
            <el-input v-model="formDefined.age" placeholder="根据输入账号自动获取" :readonly="flag"></el-input>
            </el-form-item>
            <el-form-item label="出生年月" prop="birthday">
                <el-date-picker 
                v-model="formDefined.birthday"
                type="date" 
                value-format="yyyy-MM-dd" 
                :placeholder="flag ? '' : '请填写出生年月'" 
                :picker-options="pickerOptionsStart"
                :readonly="flag">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="身份证号" prop="identity">
            <el-input v-model="formDefined.identity" :placeholder="flag ? '' : '请填写身份证号'" :readonly="flag"></el-input>
            </el-form-item>
            <el-form-item label="工作岗位" prop="jobposition">
            <el-input v-model="formDefined.jobposition" :placeholder="flag ? '' : '请填写工作岗位'" :readonly="flag"></el-input>
            </el-form-item>
            <el-form-item label="任教学段" prop="teachingsection">
            <el-input v-model="formDefined.teachingsection" :placeholder="flag ? '' : '请填写任教学段'" :readonly="flag"></el-input>
            </el-form-item>
            <el-form-item label="任教科目" prop="teachingsubjects">
            <el-input v-model="formDefined.teachingsubjects" :placeholder="flag ? '' : '请填写任教科目'" :readonly="flag"></el-input>
            </el-form-item>
            <el-form-item label="政治面貌" prop="mask">
            <el-input v-model="formDefined.mask" :placeholder="flag ? '' : '请填写政治面貌'" :readonly="flag"></el-input>
            </el-form-item>
        </el-form>
        <div v-if="!flag">
            <el-button @click="back">取消</el-button>
            <el-button type="primary" @click="save">确定</el-button>
        </div>
        <div v-else><el-button type="primary" @click="back">返回</el-button></div>
        </div>
    </div>
</template>

<script>
    import global from '../../../tools/global';
    import {debounce} from '@/tools/tool';

    export default {
        name: 'recordManageDetails',
        data() {
            return {
                pageLoad:{
                    status:false,
                    txt:'获取数据...'
                },
                flag: this.$route.query.flag === 'edit' ? false : true,
                fields: [],/*获取的字段列表 */
                title: '添加档案',
                formDefined: {
                    account: null,
                    name: null,
                    sex: null,
                    nationality: null,
                    age: null,
                    birthday: null,
                    identity: null,
                    jobposition: null,
                    teachingsection: null,
                    teachingsubjects: null,
                    mask: null,
                },
                loading: false,
                user_id: this.$route.params.id,
                accountList: [],
                pickerOptionsStart: {
                    disabledDate: (time) => {
                        return time.getTime() > parseInt(Date.now() - 8.64e7);
                    }
                },
                daveParams: [],
                editableTabsValue: '1', // 默认的标签选项卡
                editableTabs: [], // 标签页列表
                isedittableTabs: false,
                isDetailsList: false,
            }
        },
        mounted() {},
        created() {
            this.getDetails();
        },
        methods: {
            // 编辑标签页 删除 || 添加
            handleTabsEdit(targetName, action) {
                let params = {
                    year: this.editableTabs[targetName - 1].title,
                    userid: this.user_id
                }
                const success = res =>{
                    // 初始化状态
                    this.editableTabs = [];
                    this.editableTabsValue = '1';
                    this.getDetails();
                }

                if (action === 'remove') {
                    let tabs = this.editableTabs;
                    let activeName = this.editableTabsValue;
                    if (activeName === targetName) {
                        tabs.forEach((tab, index) => {
                            if (tab.name === targetName) {
                                let nextTab = tabs[index + 1] || tabs[index - 1];
                                if (nextTab) {
                                    activeName = nextTab.name;
                                }
                            }
                        });
                    }
                    
                    this.editableTabsValue = activeName;
                    this.editableTabs = tabs.filter(tab => tab.name !== targetName);
                    this.$ajax({
                        url: 'api/archive/people_archive',
                        method: 'delete',
                        params: params,
                        func: {success: success}
                    })          
                }
            },
            back() {
                this.$router.go(-1);
            },
            getDetails() {
                this.pageLoad.status = true;
                const params = {
                    userid: this.user_id,
                }
                const success = res => {
                    this.pageLoad.status = false;
                    const defineFields = res.data[0];
                    this.formDefined = Object.assign({},this.formDefined, {
                        account: defineFields[0].content,
                        name: defineFields[1].content,
                        sex: defineFields[2].content,
                        nationality: defineFields[3].content,
                        age: defineFields[4].content,
                        birthday: defineFields[5].content,
                        identity: defineFields[6].content,
                        jobposition: defineFields[7].content,
                        teachingsection: defineFields[8].content,
                        teachingsubjects: defineFields[9].content,
                        mask: defineFields[10].content,
                    })
                    this.fields = res.data;

                    // 重写为标签页的数据结构
                    res.data.forEach((val, index) => {
                        let title = '';
                        let name = ++index + ''; // string
                        let content = [];
                        let fileid;
                        
                        if (val[10]) {
                            title = val[10].content + ''; // string

                            if (val[10].content != null) { // 显示标签页
                                this.isedittableTabs = true;
                                this.isDetailsList = true;
                            } else {
                                this.isedittableTabs = false;
                                this.isDetailsList = false;
                            }
                        }

                        val.forEach((res, inx) => {               
                            if (inx > 10) {
                                content.push({
                                    name: res.name,
                                    content: res.content,
                                    fileid: res.fileid
                                })
                            }
                        })

                        this.editableTabs.push({
                            title: title,
                            name: name,
                            fileid: fileid,
                            content: content
                        })
                    })
                }

                this.$ajax.get('api/archive/people_archive', { params: params,func: {success: success}})
            },
            remoteMethod(query) {
                if (query !== '') {
                    this.loading = true;
                    const lazyLayout = debounce(() => {
                    this.getAccount(query);
                    }, 200);
                    lazyLayout();
                } else {
                    this.accountList = [];
                }
            },
            getAccount(account) {

                let params = {
                    number: account,
                    role_id: 6,
                }
                const success = res =>{
                    this.loading = false;
                    this.accountList = res.data;
                }
                this.$ajax.get('api/user/user', { params: params,func: {success: success}})
                
            },
                // accountSel(val) {
                //   const selAccount = this.accountList.filter(ele => {
                //     return Object.is(ele.number,val);
                //   })
                //   this.user_id = selAccount[0].id;
                //   this.formDefined = Object.assign({},this.formDefined, {
                //     name: selAccount[0].name,
                //     sex: selAccount[0].sex_name,
                //     area: selAccount[0].position_name ? selAccount[0].position_name : '',
                //     school: selAccount[0].school_name ? selAccount[0].school_name : '',
                //   })
                // },
            save() {
                this.$refs.form.validate(valid => {
                    if(valid) {
                    let arr = [];
                    this.fields.forEach(ele=> {
                        let year = ele[10].content;
                        arr.push({ fileid: 1,content: this.formDefined.account,year: year});
                        arr.push({ fileid: 2,content: this.formDefined.name,year: year});
                        arr.push({ fileid: 3,content: this.formDefined.sex,year: year});
                        arr.push({ fileid: 4,content: this.formDefined.nationality ? this.formDefined.nationality : '',year: year});
                        arr.push({ fileid: 5,content: this.formDefined.age ? this.formDefined.age : '',year: year});
                        arr.push({ fileid: 6,content: this.formDefined.birthday ? this.formDefined.birthday : '',year: year});
                        arr.push({ fileid: 7,content: this.formDefined.identity ? this.formDefined.identity : '',year: year});
                        arr.push({ fileid: 8,content: this.formDefined.jobposition ? this.formDefined.jobposition : '',year: year});
                        arr.push({ fileid: 9,content: this.formDefined.teachingsection ? this.formDefined.teachingsection : '',year: year});
                        arr.push({ fileid: 10,content: this.formDefined.teachingsubjects ? this.formDefined.teachingsubjects : '',year: year});
                        arr.push({ fileid: 11,content: this.formDefined.mask ? this.formDefined.mask : '',year: year});
                    })
                    // 标签页的数据需要重新获取
                    this.editableTabs.forEach((val, index) => {
                        let year = val.title;
                        val.content.forEach((child, inx) => {
                                arr.push({ fileid: child.fileid,content: child.content ? child.content : '',year: year});
                        });
                    })

                    let params = {
                        userid: this.user_id,
                        arr: arr,
                    };
                    const success = res => {
                        this.$message.success(res.msg);
                        this.back();
                    }
                    this.$ajax.put('api/archive/people_archive',params,{func:{success:success}})
                    } else {
                    return;
                    }
                })
            },
        },
    }
</script>

<style lang="scss">
    .record-manage-details {
            .el-tabs__new-tab {
                display: none;
            }

        .details-container {
            padding-left: 38px;
            .details-title {
            height: 75px;
            line-height: 75px;
            .tips {
                color: #ddd;
            }
            }
            // .el-form:nth-of-type(1) {
            //   .el-form-item__label {
            //     position: relative;
            //     &::after {
            //       display: inline-block;
            //       content: '*';
            //       vertical-align: middle;
            //       color: red;
            //     }
            //   }
            // }
            .el-form {
            width: 720px;
            .el-form-item__label {
                text-align: left;
            }
            .el-cascader {
                display: block;
            }
            .el-input {
                display: block;
                width: 100%;
            }
            }
            .el-tabs {
            width: 720px;
            margin-bottom: 20px;
            }
        }
    }
</style>
